<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:p="http://primefaces.prime.com.tr/ui"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:tcc="http://www.faesppr.br/componentes">

<ui:composition template="../template.xhtml">
	<ui:define name="conteudo">
	    <f:metadata>
			<f:event
				type="preRenderView"
				listener="#{sessaoMBean.verificaSessao}"
			/>
		</f:metadata>
		<div style="margin: auto; width: 950px; padding-top: 20px;">
		
		 <h:form id="formPanel">
			<p:growl id="growl" />
			<p:panel id="panel" header="Alteração de skin">
				<br />
				<div style="text-align:center"><h:outputText value="Clique no Skin desejado."/></div>
				<br />
                <h:panelGrid columns="4" >
                
                	<h:column>
                		<div style="width:225px; height:195px; text-align:center" >
                			<h:commandLink action="/pages/base/skin?faces-redirect=true" style="border:none">
                				<h:graphicImage library="skin/starter" name="starter.jpg"/>
                				<f:setPropertyActionListener value="starter" target="#{preferenciaUsuario.theme}"/>
               				</h:commandLink>
               				<br />
                			<h:outputText value="Starter"/>
                		</div>
                	</h:column>
                	
                	<h:column>
                		<div style="width:225px; height:195px; text-align:center" >
                	    	<h:commandLink action="/pages/base/skin?faces-redirect=true" style="border:none">
                				<h:graphicImage library="skin/jeangray" name="jeangray.jpg"/>
                				<f:setPropertyActionListener value="jeangray" target="#{preferenciaUsuario.theme}"/>
                			</h:commandLink>
                			<br />
                			<h:outputText value="Jean Gray"/>
                		</div>
                	</h:column>
                	
                	<h:column>
                		<div style="width:225px; height:195px; text-align:center" >
                			<h:commandLink action="/pages/base/skin?faces-redirect=true" style="border:none">
                				<h:graphicImage library="skin/frog" name="frog.jpg"/>
                				<f:setPropertyActionListener value="frog" target="#{preferenciaUsuario.theme}"/>
               				</h:commandLink>
               				<br />
                			<h:outputText value="Le Frog"/>
                		</div>
                	</h:column>
                	
                	<h:column>
                		<div style="width:225px; height:195px; text-align:center" >
                			<h:commandLink action="/pages/base/skin?faces-redirect=true" style="border:none">
                				<h:graphicImage library="skin/orange" name="orange.jpg"/>
                				<f:setPropertyActionListener value="orange" target="#{preferenciaUsuario.theme}"/>
               				</h:commandLink>
               				<br />
                			<h:outputText value="Annoying Orange"/>
                		</div>  
                	</h:column>
                	
                	<h:column>
                		<div style="width:225px; height:195px; text-align:center" >
                			<h:commandLink action="/pages/base/skin?faces-redirect=true" style="border:none">
                				<h:graphicImage library="skin/red" name="red.jpg"/>
                				<f:setPropertyActionListener value="red" target="#{preferenciaUsuario.theme}"/>
               				</h:commandLink>
               				<br />
                			<h:outputText value="Red"/>
                		</div>                	
                	</h:column>
                	
                	<h:column>            	                	
                		<div style="width:225px; height:195px; text-align:center" >
                			<h:commandLink action="/pages/base/skin?faces-redirect=true" style="border:none">
                				<h:graphicImage library="skin/sunny" name="sunny.jpg"/>
                				<f:setPropertyActionListener value="sunny" target="#{preferenciaUsuario.theme}"/>
               				</h:commandLink>
               				<br />
                			<h:outputText value="Sunny"/>
                		</div>
                	</h:column>
                	
                	<h:column>
                		<div style="width:225px; height:195px; text-align:center" >
                			<h:commandLink action="/pages/base/skin?faces-redirect=true" style="border:none">
                				<h:graphicImage library="skin/ubuntu" name="ubuntu.jpg"/>
                				<f:setPropertyActionListener value="ubuntu" target="#{preferenciaUsuario.theme}"/>
               				</h:commandLink>
               				<br />
                			<h:outputText value="Ubuntu"/>
                		</div>
                	</h:column>
                	
                	<h:column>
                		<div style="width:225px; height:195px; text-align:center" >
                			<h:commandLink action="/pages/base/skin?faces-redirect=true" style="border:none">
                				<h:graphicImage library="skin/vader" name="vader.jpg"/>
                				<f:setPropertyActionListener value="vader" target="#{preferenciaUsuario.theme}"/>
               				</h:commandLink>
               				<br />
                			<h:outputText value="Darth Vader"/>
                		</div>
                	</h:column>
                	
                </h:panelGrid>
			</p:panel>
		</h:form>
	</div>
	</ui:define>
</ui:composition>
</html>